import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home';
import Document from './views/Document';
import About from './views/About';
import NotFound from './views/NotFound';
import Study from './components/Study';
import Hobby from './components/Hobby';
import Work from './components/Work';
import Slider from './components/Slider';
import User from './views/User';
import Login from './views/Login';

Vue.use ( Router );

let router = new Router ({
    // 模式
    mode: 'history',
    // 自定义class名字
    // linkActiveClass: "is-active",
    // 路由的滚动行为
    scrollBehavior ( to, from, savePosition ) {
        // 目标路由对象
        // console.log ( to );
        // 从哪个路由来
        // console.log ( from );
        // 点击前进后退的x，y坐标
        // console.log ( savePosition );
        if ( savePosition ) {
            return savePosition;
        } else {
            return { x: 0, y: 0 };
        }

        // 可以通过hash来定位到某个元素
        /** if ( to.hash ) {
            return {
                selector: to.hash
            };
        } */
    },
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            component: Home,
            // 路由元信息
            meta: {
                index: 0,
                title: "home"
            }
        },
        {
            path: '/home',
            name: 'Home',
            component: Home,
            // 路由元信息
            meta: {
                index: 0,
                title: "home"
            }
            // 给路由起别名
            // alias: "/index"
        },
        {
            path: '/document',
            name: 'Document',
            // 单视图这么配没错的
            // component: Document
            // 多视图配置，如下：
            components: {
                // 默认为Document组件
                default: Document,
                // 自己配置的Slider组件
                slider: Slider
            },
            // 路由元信息
            meta: {
                index: 1,
                title: "document"
            },
            beforeEnter ( to, from, next ) {
                console.log ( "我是document的beforeEnter" );
                // 这里不调用next ()是不会往下执行的
                next ();
            }
        },
        {
            path: '/about',
            component: About,
            // 一级关于组件的子路由配置
            children: [
                {
                    // path: '/about/study',
                    path: '', // 设置默认的子路由，path路径为空就行
                    name: 'About',
                    component: Study,
                    // 路由元信息
                    meta: {
                        index: 2,
                        title: "about",
                        logined: false
                    }
                },
                {
                    path: '/about/hobby',
                    name: "Hobby",
                    component: Hobby
                },
                {
                    path: '/about/work',
                    name: "Work",
                    component: Work
                }
            ]
        },
        {
            path: "/user/:id?/:symbol?",
            name: "User",
            component: User,
            // 路由元信息
            meta: {
                index: 3,
                title: "user"
            }
        },
        {
            path: "/login",
            name: "Login",
            component: Login
        },
        {
            path: '*',
            name: 'NotFound',
            // 渲染一个组件是一种方式
            // component: NotFound
            // 重定向也是一种方式
            // redirect: '/home'
            // redirect: { path: '/document' }
            // redirect: { name: 'About' }
            redirect: ( to ) => {
                // 目录路由对象
                // console.log ( to );

                if ( to.path === '/123' ) {
                    return '/about';
                } else if ( to.path === '/456' ) {
                    return { path: '/document' };
                } else {
                    return { name: 'Home' };
                }

                // return '/home';
            }
        }
    ]
});

// 全局路由进入前的钩子函数
router.beforeEach ( ( to, from, next ) => {
    // console.log ( "beforeEach - 这里可以判断用户是否需要登录的权限" );

    // 这里就假设一个场景，假设/about路径是需要登录的
    if ( to.meta.logined ) {
        next ({
            name: "Login"
        });
    } else {
        next ();
    }
});

// 全局路由进入后的钩子函数
router.afterEach ( ( to, from, next ) => {
    // console.log ( "afterEach - 这里可以修改document上的一些属性" );

    if ( to.meta.title ) {
        window.document.title = to.meta.title;
    } else {
        window.document.title = '我是默认标题';
    }
});

//  导出router
export default router;
